<template>
    <view>
        <u-popup :show="payShow" mode="bottom" bgColor="transparent">
            <view class="pay_big_box" :style="{ backgroundImage: ' url(' + bgImg + ')' }">
                <view class="top_box">
                    <view class="chahao_box"></view>
                    <view class="box_title_box">确认订单</view>
                    <view class="chahao_box" @click="close">
                        <image src="https://morgan.dingxians.cn/static/shopdetail/9.png" mode="scaleToFill" />
                    </view>
                </view>
                <view class="pay_sp_box" v-if="pata">
                    <view class="left_pic_sp_box">
                        <image :src="challenge_box_data.image" mode="scaleToFill" />
                    </view>
                    <view class="right_text_box">
                        <view class="pay_left_top_box">
                            <view class="pay_left_top_left_box">
                                {{ challenge_box_data.name }}
                            </view>
                            <view class="sp_num_box">x{{ burst }}</view>
                        </view>
                        <view class="pay_price_box">
                            ¥{{ challenge_box_data.price }}
                        </view>
                    </view>
                </view>
                <view class="pay_type_box" v-if="si_dPay">
                    <view class="pay_title_box">支付方式</view>
                    <view class="zy_pay_type_box" v-for="(item, index) in payList" :key="index" @click="payType(item)">
                        <view class="left_pay_icon_txt_box">
                            <view class="le_pay_icon_box">
                                <image :src="item.icon" mode="scaleToFill" />
                            </view>
                            <view class="pay_txt_box">{{ item.text }}</view>
                        </view>
                        <view class="right_icon_age_box">
                            <image v-if="payId == item.id" src="https://morgan.dingxians.cn/static/payImg/10.png"
                                mode="scaleToFill" />
                            <image v-else src="https://morgan.dingxians.cn/static/payImg/7.png" mode="scaleToFill" />
                        </view>
                    </view>
                </view>
                <view class="line"></view>
                <view class="pay_type_box">
                    <view class="zy_pay_type_box">
                        <view class="left_pay_icon_txt_box">
                            <view class="le_pay_icon_box">
                                <image src="https://morgan.dingxians.cn/static/payImg/5.png" mode="widthFix" />
                            </view>
                            <view class="pay_txt_box">优惠券抵扣</view>
                        </view>
                        <view class="right_icon_cocupup_box">
                            <view class="yohuiquan_box" @click="conClick">选择优惠券</view>
                            <view class="jiantou_box" @click="conClick"><u-icon name="arrow-right" color="#FFFFFF"
                                    size="20"></u-icon>
                            </view>
                        </view>
                    </view>
                </view>
                <view class="pay_type_box">
                    <view class="zy_pay_type_box">
                        <view class="left_pay_icon_txt_box">
                            <view class="le_pay_icon_box">
                                <image src="https://morgan.dingxians.cn/static/payImg/1.png" mode="widthFix" />
                            </view>
                            <view class="pay_txt_box">元素抵扣&emsp;&emsp;{{ balance }}</view>
                        </view>
                        <view class="right_icon_age_box">
                        </view>
                    </view>
                </view>
                <view class="pay_type_box">
                    <view class="zy_pay_type_box">
                        <view class="left_pay_icon_txt_box">
                            <view class="le_pay_icon_box">
                                <image src="https://morgan.dingxians.cn/static/payImg/4.png" mode="widthFix" />
                            </view>
                            <view class="pay_txt_box">钻石抵扣&emsp;&emsp;{{ point }}</view>
                        </view>
                        <view class="right_icon_age_box">
                        </view>
                    </view>
                </view>
                <!-- 提醒 -->
                <view class="tixing_box">未满18周岁未成年人请在监护人陪同下购买</view>
                <view class="tixing_box">盲盒存在概率性，请谨慎购买，出售概不退换</view>
                <!-- 协议 -->
                <view class="ageree_box">
                    <view class="age_pic_box" @click="agreeBtn">
                        <image v-if="!agreeSta" src="https://morgan.dingxians.cn/static/payImg/8.png"
                            mode="scaleToFill" />
                        <image v-else src="https://morgan.dingxians.cn/static/payImg/9.png" mode="scaleToFill" />
                    </view>
                    <view class="text_box">
                        我已经满18周岁，已阅读并同意购买
                    </view>
                </view>
                <view class="line" style="margin-bottom: 12rpx;"></view>
                <view class="pay_price_big_box">
                    <view class="zs_pice_box">
                        <text style="font-size: 24rpx;color: #fff;">合计：</text>
                        ￥{{ pay_price || '0.00' }}
                    </view>
                    <view class="rtds_box"
                        style="background-image: url('https://morgan.dingxians.cn/static/shopdetail/2.png');"
                        @click="goumai">
                        确认购买</view>
                </view>
            </view>
        </u-popup>

    </view>
</template>
<script>
export default {
    props: {
        payShow: {
            type: Boolean,
            default: false
        },
        agreeSta: {
            type: Boolean,
            default: true
        },
        si_dPay: {
            type: Boolean,
            default: false
        },
        challenge_box_data: {
            type: Object,
            default: {}
        },
        burst: {
            type: String,
            default: ''
        },
        payId: {
            type: String,
            default: ''
        },
        point: {
            type: [Number, String],
            default: ''
        },
        balance: {
            type: [Number, String],
            default: ''
        },
        pay_price: {
            type: [Number, String],
            default: '0.00'
        },
        pata: {
            type: Object,
            default: true
        },
        bgImg: {
            type: String,
            default: 'https://morgan.dingxians.cn/upload/20241017/6710e9c517f9a.png'
        }
    },
    data() {
        return {
            payList: [
                // #ifdef MP-WEIXIN
                {
                    id: 1,
                    text: '微信',
                    icon: 'https://yq.dingxians.cn/upload/static/pay_icon/04.png'
                },
                // #endif

                // #ifdef APP-PLUS
                {
                    id: 1,
                    text: '微信',
                    icon: 'https://yq.dingxians.cn/upload/static/pay_icon/04.png'
                },
                {
                    id: 2,
                    text: '支付宝',
                    icon: 'https://yq.dingxians.cn/upload/static/pay_icon/05.png'
                }
                ,
                // #endif
                // #ifdef MP-ALIPAY
                {
                    id: 3,
                    text: '支付宝',
                    icon: 'https://yq.dingxians.cn/upload/static/pay_icon/05.png'
                }
                // #endif
            ],
        }
    },
    methods: {
        close() {
            this.$emit('closePopup')
        },
        payType(item) {
            this.$emit('payType', item)
        },
        agreeBtn() {
            this.$emit('agreeBtn')
        },
        goumai() {
            this.$emit('goumai')
        },
        conClick() {
            this.$emit('conClick')
        }

    }
}
</script>
<style lang="scss" scoped>
.pay_big_box {
    width: 100%;
    // height: 1091rpx;
    background-size: 100% 100%;
    box-sizing: border-box;
    padding-top: 47rpx;

    .top_box {
        width: 100%;
        display: flex;
        justify-content: space-between;
        align-items: center;
        box-sizing: border-box;
        padding: 0 40rpx;
        margin-bottom: 36rpx;

        .box_title_box {
            width: 271rpx;
            height: 72rpx;
            text-align: center;
            line-height: 72rpx;
            font-family: PingFang SC;
            font-weight: bold;
            font-size: 42rpx;
            color: #FFFFFF;
        }

        .chahao_box {
            width: 42rpx;
            height: 42rpx;

            image {
                width: 100%;
                height: 100%;
            }
        }
    }

    .pay_sp_box {
        width: 100%;
        height: 160rpx;
        box-sizing: border-box;
        padding: 0 40rpx 0 30rpx;
        display: flex;
        justify-content: space-between;
        margin-bottom: 42rpx;

        .left_pic_sp_box {
            width: 160rpx;
            height: 160rpx;
            border-radius: 10rpx;
            background-color: rgba(23, 1, 3, 1);

            image {
                width: 100%;
                height: 100%;
                border-radius: 10rpx;
            }
        }

        .right_text_box {
            width: 500rpx;
            height: 160rpx;
            box-sizing: border-box;
            padding-top: 7rpx;

            .pay_left_top_box {
                width: 100%;
                height: 27rpx;
                display: flex;
                justify-content: space-between;
                margin-bottom: 86rpx;

                .pay_left_top_left_box {
                    width: 300rpx;
                    height: 27rpx;
                    font-family: PingFang SC;
                    font-weight: bold;
                    font-size: 28rpx;
                    color: #FFFFFF;
                    line-height: 27rpx;
                    overflow: hidden;
                    text-overflow: ellipsis;
                    white-space: nowrap;
                }

                .sp_num_box {
                    height: 22rpx;
                    font-family: PingFang SC;
                    font-weight: bold;
                    font-size: 28rpx;
                    color: #FFFFFF;
                    line-height: 22rpx;
                }
            }

            .pay_price_box {
                height: 32rpx;
                font-family: PingFang SC;
                font-weight: bold;
                font-size: 28rpx;
                color: #F56198;
                line-height: 32rpx;
            }
        }
    }

    .pay_type_box {
        width: 100%;
        box-sizing: border-box;
        padding: 0 30rpx;

        .pay_title_box {
            width: 100%;
            height: 31rpx;
            font-family: PingFang SC;
            font-weight: bold;
            font-size: 32rpx;
            color: #FFFFFF;
            line-height: 31rpx;
            margin-bottom: 30rpx;
        }

        .zy_pay_type_box {
            width: 100%;
            height: 40rpx;
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 30rpx;

            .left_pay_icon_txt_box {
                // width: 50%;
                height: 100%;
                display: flex;
                justify-content: flex-start;

                .le_pay_icon_box {
                    width: 40rpx;
                    height: 40rpx;
                    margin-right: 20rpx;

                    image {
                        width: 100%;
                        height: 100%;
                    }
                }

                .pay_txt_box {
                    height: 40rpx;
                    font-family: PingFang SC;
                    font-weight: bold;
                    font-size: 28rpx;
                    color: #FFFFFF;
                    line-height: 40rpx;
                }
            }

            .right_icon_age_box {
                width: 38rpx;
                height: 38rpx;

                image {
                    width: 38rpx;
                    height: 38rpx
                }
            }

            .right_icon_cocupup_box {
                height: 40rpx;
                display: flex;
                justify-content: flex-end;
                align-items: center;

                .yohuiquan_box {
                    height: 40rpx;
                    line-height: 40rpx;
                    font-family: PingFang SC;
                    font-weight: 500;
                    font-size: 28rpx;
                    color: #FFFFFF;

                }

                .jiantou_box {
                    height: 32rpx;
                    line-height: 46rpx;
                    font-family: PingFang SC;
                    font-weight: 500;
                    font-size: 28rpx;
                    color: #FFFFFF;
                    margin-left: 13rpx;
                }
            }
        }
    }

    .line {
        width: 720rpx;
        box-sizing: border-box;
        padding: 0 30rpx;
        height: 1rpx;
        background: #E7E7E7;
        opacity: 0.3;
        margin: auto;
        margin-bottom: 35rpx;

    }

    .ageree_box {
        width: 100%;
        height: 40rpx;
        display: flex;
        justify-content: flex-start;
        align-items: center;
        box-sizing: border-box;
        padding: 0 30rpx;
        margin-bottom: 42rpx;

        .age_pic_box {
            width: 38rpx;
            height: 38rpx;
            margin-right: 10rpx;

            image {
                width: 100%;
                height: 100%;
            }
        }

        .text_box {
            height: 30rpx;
            font-family: PingFang SC;
            font-weight: 500;
            font-size: 22rpx;
            color: rgba(175, 175, 175, 1);
            line-height: 31rpx;
        }
    }

    .tixing_box {
        width: 100%;
        height: 21rpx;
        font-family: PingFang SC;
        font-weight: 500;
        font-size: 20rpx;
        color: #AFAFAF;
        line-height: 21rpx;
        margin-bottom: 19rpx;
        box-sizing: border-box;
        padding: 0 30rpx;
        // text-align: center;
    }

    .pay_price_big_box {
        width: 100%;
        height: 80rpx;
        box-sizing: border-box;
        padding: 0 30rpx;
        display: flex;
        justify-content: space-between;
        margin-bottom: 60rpx;

        .zs_pice_box {
            height: 80rpx;
            font-family: PingFang SC;
            font-weight: 600;
            font-size: 48rpx;
            color: rgba(245, 97, 151, 1);
            line-height: 80rpx;
        }

        .rtds_box {
            width: 289rpx;
            height: 77rpx;
            font-family: PingFang SC;
            font-weight: bold;
            font-size: 28rpx;
            background-size: 100% 100%;
            color: #FFFFFF;
            line-height: 77rpx;
            text-align: center;
        }
    }
}
</style>